<template>
    <div>
        <div class="follow">
            <div class="container">
                <div class="head">
                    <div class="iconfont" @click="$router.back()">
                        &#xe624;
                    </div>
                    <h1>我的关注</h1>
                    <div></div>
                </div>
                <div class="uls">
                    <div class="list" v-for="(item,index) in data.arr" :key="index" @click="user(item.userid)">
                        <div class="img">
                            <img :src="item.user_photo" alt="">
                        </div>
                        <div class="info">
                    
                            <h4>{{ (item.nickname || item.nick)}}</h4>
                            <em>LV.{{ item.lvl }}</em>
                    
                        </div>
                        <div class="btn">
                            <div class="over" @click="del(index)">
                                取消关注
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { useStore } from "../store/index";
import { reactive } from '@vue/runtime-core'
import { useRouter } from 'vue-router'
    export default {
        setup(){
            let router = useRouter();
            let store = useStore();
            let data = reactive({
                arr:[]
            })
            data.arr = store.follow;
            function del(index) {
                store.follow.splice(index,1);
            }
            function user(user) {//进入用户页
                let id = user;
                router.push({
                    path: "/person",
                    query: {
                        id
                    }
                })
            }
            console.log(data.arr);
            return {
                data,
                del,
                user
            }
        }
    }
</script>

<style lang="scss" scoped>
.follow{
    .head{
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid #efefef;
        .iconfont{
            font-size: 20px;
            color: #333;
        }
        h1{
            font-size: 20px;
            padding-right: 20px;
        }
    }
    .uls{
        padding: 0 20px;
        .list{
            display: flex;
            padding: 8px 0;
            align-items: center;
            .img{
                img{
                    width: 34px;
                    height: 34px;
                    border-radius: 50%;
                    display:block;
                }
                padding-right:10px ;
            }
            .info{
                display: flex;
                flex: 1;
                align-content: center;
                h4{
                    font-size: 16px;
                    font-weight: normal;
                }
                em{
                    color: #f3eeaa;
                    font-size: 14px;
                    display: block;
                    padding-left: 5px;
                    line-height: 20px;
                }
            }
            .btn{
                padding-left: 10px;
                .over{
                    font-size: 15px;
                    color: #adadad;
                    padding: 6px 16px;
                    border-radius: 16px;
                    background-color: #f6f6f6;
                }
            }
        }
    }
}
</style>